<!--
  标签分类
  props：
    tabOptions array 标签数据 参数参考：["课程管理"]
    color string 下横线颜色 default:#3385FF
    titleInactiveColor string 非选中标签颜色 default：#61677A
    titleActiveColor string 选中标签颜色 default：#0F1826

  event:
    change 选中项变化 arg1:选中项下标 arg2:选中项标题
-->
<template>
  <div class="wrapper">
    <van-tabs
      line-width="15px"
      line-height="3px"
      :color="color"
      :title-inactive-color="titleInactiveColor"
      :title-active-color="titleActiveColor"
      @change="handleChange"
    >
      <van-tab  v-for="(item, i) in tabOptions" :key="i" :title="item"></van-tab>
    </van-tabs>
    <div class="after-wrapper">
      <slot name="after">
        <img src="static/img/list/icon_quanbu.png" alt="icon_quanbu" width="14">
      </slot>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant"
export default {
  name: "qm-classification",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  props: {
    tabOptions: {
      type: Array,
      default: () => ["课程管理", "班委名单", "教学材料", "培训成果", "课程管理", "班委名单", "教学材料", "培训成果"]
    },
    color: {
      type: String,
      default: "#3385FF"
    },
    titleInactiveColor: {
      type: String,
      default: "#61677A"
    },
    titleActiveColor: {
      type: String,
      default: "#0F1826"
    }
  },
  methods: {
    handleChange(...args) {
      this.$emit("change", ...args);
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  // padding-right: calc(100px * var(--ratio));
  position: relative;
  width: 100%;
  overflow: hidden;
  .after-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    width: calc(100px * var(--ratio));
    height: calc(100px * var(--ratio));
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff calc(25px * var(--ratio)), #FFFFFF 100%);
  }

  ::v-deep .van-tabs__nav{
    padding-right: calc(100px * var(--ratio));

    .van-tab {
      font-size: var(--font-size-subcontent);

      &.van-tab--active {
        font-size: var(--font-size-maintitle);
      }
    }
  }
}
</style>
